<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.9.2/tinymce.min.js"></script> -->
	<script src="./tinymce/js/tinymce/tinymce.min.js"></script>
	<script src="./zh_CN.js"></script>
</head>

<body>
	<h1>TinyMCE快速开始示例</h1>
	<h1><a href="https://www.tiny.cloud/get-tiny/self-hosted/" target="_blank">下载依赖包</a></h1>
	<button onclick="setVal()">设置内容</button>
	<button onclick="getVal()" >获取内容</button>
	<form method="post">
		<textarea id="mytextarea">Hello, World!</textarea>
	</form>
	<script>
		tinymce.init({
			selector: '#mytextarea',
			language: 'zh_CN',
			plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize',
			toolbar: 'mycustombutton code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
			height: 650, //编辑器高度
			min_height: 400,
			/*content_css: [ //可设置编辑区内容展示的css，谨慎使用
				'/static/reset.css',
				'/static/ax.css',
				'/static/css.css',
			],*/
			fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
			font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
			link_list: [
				{ title: '预置链接1', value: 'http://www.tinymce.com' },
				{ title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
			],
			image_list: [
				{ title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
				{ title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
			],
			image_class_list: [
				{ title: 'None', value: '' },
				{ title: 'Some class', value: 'class-name' }
			],
			// 上传本地图片
			images_upload_handler: function (blobInfo, success, failure, progress) {
				const formData = new FormData();
				formData.append('file', blobInfo.blob(), blobInfo.filename());
				console.log(formData);
				failure('上传失败', { remove: true });
				// upload(formData)
				// 	.then(res => {
				// 		const url = `${viewFile}/images/${res[0].name}`;
				// 		success(url);
				// 	})
				// 	.catch(() => {
				// 		failure('上传失败', { remove: true });
				// 	});
			},
			importcss_append: true,
			//自定义文件选择器的回调内容
			file_picker_callback: function (callback, value, meta) {
				if (meta.filetype === 'file') {
					callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
				}
				if (meta.filetype === 'image') {
					callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
				}
				if (meta.filetype === 'media') {
					callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
				}
			},
			toolbar_sticky: true,
			autosave_ask_before_unload: false,
			setup: editor => {
				// 设值
				editor.on('init', function () {
					this.setContent('初始化后的内容');
				});
				// 取值
				editor.on('change', function () {
					console.log('内容已更改：', this.getContent());
				});
				// 自定义按钮
				editor.ui.registry.addButton('mycustombutton', {
					text: '上传本地图片',
					onAction: () => {
						const input = document.createElement('input');
						input.type = 'file';
						input.accept = 'image/*'; // 只允许图片文件
						input.onchange = e => {
							const file = e.target.files[0];
							if (file) {
								const reader = new FileReader();
								reader.onload = e => {
									const base64 = e.target.result.split(',')[1]; // 获取base64编码部分
									console.log(base64);
									// 这里可以调用一个函数将base64发送到服务器或者进行其他处理
									// uploadImageToServer(base64); // 自定义的上传函数
								};
								reader.readAsDataURL(file); // 读取文件内容为DataURL格式的base64编码字符串
							}
						};
						input.click(); // 触发文件选择对话框
					}
				});
				// editorRef.value = editor; // 设置编辑器引用，以便在组件外部使用或操作编辑器实例。
			}
		});

		function setVal(){
			tinymce.activeEditor.setContent('这是新的内容111111'); // 设置内容
		}
		function getVal() {
			const content = tinymce.activeEditor.getContent(); // 获取内容
			console.log(content);
		}
	</script>
</body>

</html>